import React, { useEffect, useRef, useState } from 'react'
import './Shop.css'
import { Modal } from 'antd';
import { Popup, Space, Button } from 'antd-mobile'
import { InfiniteScroll, List, DotLoading } from 'antd-mobile'
import Face from './Face'
import axios from 'axios'
import { Badge, TabBar } from 'antd-mobile'
import { BackTop, Cell } from '@nutui/nutui-react'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function Shop() {

  const InfiniteScrollContent = ({ hasMore }) => {
    return (
      <>
        {hasMore ? (
          <>
            <span>Loading...</span>

          </>
        ) : (
          <span>--- 我是有底线的 ---</span>
        )}
      </>
    )
  }
  const [datas, setDatas] = useState([{ img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }, { img: "../logo192.png", title: "海德利畅享乳清蛋白粉25磅", price: 180, out: "详情" }])

  const tabs = [
    {
      key: 'home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: 'todo',
      title: '分类',
      icon: <UnorderedListOutline />,
      badge: '5',
    },
    {
      key: 'message',
      title: '购物车',
      icon: (active) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: 'personalCenter',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  const [visible1, setVisible1] = useState(false)
  const [price, setPrice] = React.useState(180)
  const [data, setData] = useState([])
  const [flags, setflag] = useState(false)

  const [arrflag, setarrflag] = useState([])
  const totalPrice = data.filter(item => item.flag === true).reduce((sum, item) => sum += Number(item.price) * Number(item.num), 0);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = async () => {
    let res = await axios.delete("/kong")
    getData()
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const getData = async () => {

    let res = await axios.get('/getshop')
    if (res.data.code == 200) {
      setData(res.data.data)
      console.log(res.data.data);
    }
  }

  const flag = async (item) => {
    setarrflag([...arrflag, item._id])
    let res = await axios.put("/putflag", item)
    getData()
  }
  let shop_body = useRef(null)
  const [hasMore, setHasMore] = useState(true)
  async function loadMore(e) {

    setTimeout((e) => {
      // let list = []
      setDatas([...datas, ...datas.slice(0, 8)])
      setHasMore(true)
    }, 2000)
    if (datas.length > 100) {
      setHasMore(false)
    }
  }


  useEffect(() => {
    getData()
  }, [])

  return (
    <div>
      <div className='shop_header'>
        <h2>购物车</h2>
      </div>
      <div className='shop_body'>
        <div className='shop_text'>{flags ? <p><span onClick={async () => {
          let res = await axios.delete(`/deletshop/${arrflag}`)
          setarrflag([])
          getData()
        }}>删除</span>|<span style={{ color: "aqua" }} onClick={() => {
          setflag(false)
        }}>取消</span></p> : <p onClick={() => {
          setflag(true)
        }}>编辑</p>}</div>

        <div className='shop_list'>
          {
            data.map((item, index) => {

              return (
                <div className='shop_list_item' key={item._id}>

                  <div><input type="checkbox" checked={item.flag} onChange={() => {
                    flag(item)
                  }}></input></div>
                  <div><img src={item.img} ></img></div>
                  <div>
                    <p className='overflowing-text'>{item.title}</p>
                    <div><button style={{ background: "rgb(205, 235, 251)", color: "rgb(82, 186, 243)" }}>极速退款</button><button style={{ background: "rgb(254, 246, 231)", color: "rgb(245, 204, 110)" }}>正品保障</button></div>
                    <div className='shop_price'><div className='shop_price_one'><p style={{ color: "red" }}>￥{Number(item.price * 0.8).toFixed(2)}</p><p><del>￥{item.price}</del></p></div><div>X{item.num}</div></div>
                  </div>

                </div>
              )

            })
          }
          <div className='shop_one_bottom'><p>已参与<span style={{ color: "rgb(139, 208, 246)" }}>满400元减20元</span>，再购买<span style={{ color: "red" }}>20元</span >可减<span style={{ color: "red" }}>30元</span></p><p style={{ color: "red" }}>去凑单 &gt;
          </p></div>
        </div>


        <h3 className='shop_h3'>猜你喜欢</h3>
        <>
          npm install face-api.js


        </>
        <div className='shop_like'>
          <List>
            {datas.map((item, index) => (
              <List.Item key={index}>
                <div className='shop_like_one'>
                  <img src="../logo192.png" ></img>
                  <p>海德利畅享乳清蛋白粉25磅</p>
                  <h3 style={{ color: "red" }}>￥{price * 0.6}</h3>
                  <p>详情</p>
                </div>
              </List.Item>
            ))}

          </List>
          {/*
            <img src="../logo192.png" ></img>
            <p>海德利畅享乳清蛋白粉25磅</p>
            <h3 style={{ color: "red" }}>￥{price * 0.6}</h3>
            <p>详情</p>
          </div>
          <div>
            <img src="../logo192.png" ></img>
            <p></p>
            <h3 style={{ color: "red" }}>￥{price * 0.6}</h3>
            <p>详情</p>
          </div> */}

        </div>
        <InfiniteScroll ref={shop_body} loadMore={(e) => loadMore(e)} hasMore={hasMore}>
          <InfiniteScrollContent hasMore={hasMore} />
        </InfiniteScroll>
      </div>

      <>

        <Popup
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false)
          }}
          onClose={() => {
            setVisible1(false)
          }}
          bodyStyle={{ height: '40vh' }}
        >
          <div className='shop_popup'>
            <div onClick={() => {
              showModal(true)
            }}>
              <img src="../u=548387780,529844049&fm=253&fmt=auto&app=138&f=JPEG.webp"></img>
              <p>微信支付</p>
            </div>
            <div onClick={() => {
              showModal(true)
            }}>
              <img src="../u=2228849449,3883757609&fm=253&fmt=auto&app=138&f=JPEG.webp"></img>
              <p>支付宝支付</p>
            </div>
          </div>
        </Popup>
      </>

      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} style={{ textAlign: "Center" }}>
        <h2>支付</h2>
        <h3>共{Number(totalPrice * 0.8).toFixed(2)}</h3>
        <Face></Face>
      </Modal>
      <div className='shop_shop'><p>合计：<span>￥{Number((totalPrice * 0.8)).toFixed(2)}</span> <span>已优惠：￥{Number(totalPrice * 0.2).toFixed(2)}</span></p>  <button className='shop_btn' onClick={() => {
        setVisible1(true)
      }}>去付款（{data.filter(item => item.flag == true).length}）</button></div>
      <div className='shop_bottom'>
        <TabBar defaultActiveKey="message">
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>

      </div>

    </div>
  )
}

